<template>
	<view class="container">
		<!-- 搜索条件 -->
		<uni-forms :modelValue="searchParams">
			<uni-forms-item label="用户ID:" name="userId" :label-width='73'>
				<uni-easyinput type="text" v-model="searchParams.userId" placeholder="请输入用户ID" />
			</uni-forms-item>
			<uni-forms-item label="用户分类:" name="categoryIndex" :label-width='73'>
				<uni-data-select v-model="searchParams.categoryIndex" :localdata="range"
					@change="changeType"></uni-data-select>
			</uni-forms-item>
		</uni-forms>
		<!-- 按钮 -->
		<view class="button-container">
			<button @click="resetSearch" class="btn">重置</button>
			<button @click="search" type="primary" class="btn">搜索</button>
		</view>
		<!-- 表格 -->
		<el-table :data="tableData" style="width: 100%">
			<el-table-column v-for="item in columns" :prop="item.prop" :label="item.label" width="120">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="50">
				<template slot-scope="{row}">
					<el-button @click="handleEdit(row)" type="text" size="small">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<uni-pagination :current="searchParams.page" :total="total" :pageSize="pageSize" class="mt20"
			@change="handlePaginationChange"></uni-pagination>
	</view>
</template>

<script>
	import {
		queryActing
	} from '@/api/agent'
	export default {
		data() {
			return {
				searchParams: {
					page:1,//第几页
					date: '',
					categoryIndex: undefined,
					userId: ''
				},
				sortBy: 'userId', // 默认按 userId 排序
				sortOrder: 'asc', // 默认升序
				range: [{
						value: 0,
						text: "直属游戏用户"
					},
					{
						value: 1,
						text: "直属一级代理"
					},
					{
						value: 2,
						text: "二级代理"
					},
				],
				columns: [{
						label: '平台ID',
						prop: 'userId'
					},
					{
						label: '用户属性',
						prop: 'username'
					},
					{
						label: '注册时间',
						prop: 'category'
					},
					{
						label: '最后登录时间',
						prop: 'registerTime'
					}, {
						label: '上级代理',
						prop: 'category'
					},
					{
						label: '绑定玩家数',
						prop: 'registerTime'
					},
					{
						label: '绑定二级代理数',
						prop: 'registerTime'
					},
					{
						label: '绑定一级代理数',
						prop: 'registerTime'
					}
				],
				tableData: [{
						userId: '1',
						username: '张三',
						category: '普通用户',
						registerTime: '2023-11-01'
					},
					{
						userId: '4',
						username: '王五',
						category: 'VIP用户',
						registerTime: '2023-02-10'
					}, {
						userId: '2',
						username: '李四',
						category: 'VIP用户',
						registerTime: '2023-02-01'
					}, {
						userId: '3',
						username: '老刘',
						category: 'VIP用户',
						registerTime: '2023-02-04'
					},
				],
				pageSize: 10,
				total: 0,
				loading: false,
			};
		},
		mounted() {
			// 页面初始化时按 userId 升序排序
			this.sortTable('userId');
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/user/gameAgent/createOrEditAgent'
			})
		},
		onShow(){
			this.getList()
		},
		methods: {
			getList() {
				queryActing(this.searchParams).then(res => {
					console.log(121, res);
				})
			},
			handleEdit(row) {
				// console.log('handleEdit triggered', item);
				let params = JSON.stringify(row)
				uni.navigateTo({
					url: `/pages/user/gameAgent/createOrEditAgent?id=${params.id}`
				})
				// 你可以在这里添加更多的逻辑
			},
			sortTable(column) {
				if (this.sortBy === column) {
					this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
				} else {
					this.sortBy = column;
					this.sortOrder = 'asc';
				}

				this.tableData.sort((a, b) => {
					let valA = a[column];
					let valB = b[column];

					if (typeof valA === 'string') {
						valA = valA.toLowerCase();
						valB = valB.toLowerCase();
					}

					if (this.sortOrder === 'asc') {
						return valA < valB ? -1 : (valA > valB ? 1 : 0);
					} else {
						return valA > valB ? -1 : (valA < valB ? 1 : 0);
					}
				});
			},
			// 时间改变
			bindDateChange(e) {
				this.searchParams.date = e.detail.value;
			},
			// 重置
			resetSearch() {
				this.searchParams = {
					date: '',
					categoryIndex: undefined,
					userId: '',
					page:1
				};
				this.search();
				this.total = 0;
			},
			search() {
				this.getList()
			},
			// 分页
			handlePaginationChange(e) {
				this.searchParams.page = e.current;
				this.search();
			},
			// 用户分类
			changeType(e) {
				this.searchParams.categoryIndex = e;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20px;
	}

	.sort-icon {
		cursor: pointer;
		margin-left: 5px;
		display: inline-block;
	}

	.search-container {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}

	.btn {
		height: 65rpx;
		width: 30%;
		font-size: 24rpx;
	}

	.time {
		// flex: 1;
		width: 90%;
	}

	.picker {
		border: 1px solid #e5e5e5;
		border-radius: 5rpx;
		padding: 5px 10px;
		width: 100%;
		font-size: 14px !important;
	}

	.button-container {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	/* 响应式布局 */
	// @media (min-width: 700px) {
	// 	.uni-forms-item {
	// 		flex: 1 1 33.33%;
	// 		/* 在较大屏幕上，每个搜索项占据三分之一宽度 */
	// 	}
	// }

	.pagination-container {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
	}

	.pagination-container button {
		margin: 0 10px;
	}

	::v-deep .uni-input-placeholder {
		font-size: 14px !important;
	}

	::v-deep .uni-select__input-placeholder {
		font-size: 14px !important;
	}

	::v-deep .uni-easyinput__content-input {
		height: 30px;
	}
</style>